<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性绑定指令</title>
  <script src="./lib/vue.js"></script>
</head>

<body>
  <div id='app'>
    <!-- v-bind: 也可以省略为 :  -->
    <input type="text" v-bind:placeholder="message" >
    <input type="text" :placeholder="message" >
    <hr>

    <img v-bind:src="photo" alt="" style="height: 150px;width: 150px;">
    <hr>

    <p>{{words}} 翻转后 {{words.split('').reverse().join('')}}</p>
    <div :title="'box'+index">
      这是一段话
    </div>
  </div>

  <script>
    let i = 1.
    const app = new Vue({
      el: '#app',//el属性决定vue挂载到哪个元素
      data: {
        message: '请输入：',
        photo: 'https://v3.vuejs.org/logo.png',
        words: '请将下面这段话翻转',
        index: i
      }
    })
  </script>
</body>

</html>